﻿@model  BrnMall.Web.StoreAdmin.Models.BranchModel

@section header{
    <title>门店图片-店铺管理</title>
    <link type="text/css" rel="stylesheet" href="/admin_store/css/site.css" />
    <link type="text/css" rel="stylesheet" href="/components/webuploader/webuploader.css" />
    <link type="text/css" rel="stylesheet" href="/components/umeditor/themes/default/css/umeditor.css">
    <script type="text/javascript" src="/admin_store/scripts/jquery.js"></script>
    <script type="text/javascript" src="/components/webuploader/webuploader.js"></script>
    <style>
        .dataList { min-height:500px;}
        .delPic { cursor:pointer;}
    </style>
    <script type="text/javascript">
        $(function () {
            var uploader = WebUploader.create({
                pick: '.uploadBut',
                auto: true,
                swf: '/components/webuploader/Uploader.swf',
                server: '/storeadmin/tool/upload?operation=uploadstorebanner',
                fileVal: 'upload',
                accept: {
                    title: 'Images',
                    extensions: '@ViewData["allowImgType"]',
                    mimeTypes: '*'
                },
                fileSingleSizeLimit: '@ViewData["maxImgSize"]'
            });

            uploader.on('uploadProgress', function(file, percentage) {
                $(".uploadPreview").html("上传中...");
            });

            uploader.on('uploadSuccess', function(file, response) {
                var data = response._raw;
                if (data == "-1")
                    $(".uploadPreview").html('图片不能为空');
                else if (data == "-2")
                    $(".uploadPreview").html('图片类型不允许');
                else if (data == "-3")
                    $(".uploadPreview").html('图片太大');
                else {
                    $(".uploadPreview").html("<img src=\"@WorkContext.ImageCDN/upload/store/@WorkContext.StoreId/banner/" + data + "\"  />");
                    addPic(data);   //添加一张图片
                }
            });

            uploader.on('uploadError', function(file) {
                $(".uploadPreview").html("上传失败");
            });

        });
    </script>
}
@section body{
    <h1 class="rightH1">
        微信小程序 &gt; 店铺管理 &gt; <span class="rightH1-cur">门店图片</span> 
        <div class="right">
            <a href="@Url.Action("BranchList")" class="menuBT"><img src="/admin_store/images/goback.jpg" />返回门店列表</a>
            <div class="clear"></div>
        </div>
        <div class="clear"></div>
    </h1>


<div class="dataList">
    <table width="100%">
        <thead>
            <tr>
                <th width="40" align="center"><input type="checkbox" id="allSelect" /></th>
                <th align="left">图片</th>
                <th width="300" align="left">管理操作</th>
            </tr>
        </thead>
        <tbody class="imglist">
            <tr><td colspan="3" class="nopic" style="text-align:center">暂无图片</td></tr>           
        </tbody>
    </table>
   @using (Html.BeginForm("EidtBranchImg", "store", FormMethod.Post, new { @id = "branchform" }))
   {
       @Html.HiddenFor(x=> x.Bid)
    <input type="hidden" name="imgs" class="imgs" value="@Model.Imgs" />
    <div class="form_imgs" style="display:none"></div>

    <div style=" margin-top:30px;" class="addTable fin">
        <table width="100%" style="margin-top:10px;">
            <tbody>
                <tr>
                    <td width="66px" align="right">上传图片：</td>
                    <td>
                        <div class="uploadPreview">暂无图片</div>
                        <input type="hidden" name="Pid" id="Pid" value="11" />
                        <div class="upload">
                            <div class="left">
                                <div class="uploadProgressBar"></div>
                                <div class="uploadBut" style="margin-left:20px">选择图片</div>
                            </div>
                            <div class="clear"></div>
                            说明：图片宽高比例是1：1，建议尺寸是：800x800，图片数量建议不超过6张，上传图片后点保存按钮保存
                        </div>
                    </td>
                </tr>           
                <tr>
                    <td align="right"></td>
                    <td>
                        <img src="~/admin_store/images/b.jpg" id="savePic" style="cursor:pointer;" />
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
   }
</div>

    <script>
        var imgIndex = 0;
        $(function(){
            load();
            bindImgBtn()
            $("#savePic").click(function () { savePic() })
        })
        function load() {
            var imgs = '@Model.Imgs'
            var arrImg = imgs == "" ? [] : imgs.split(',');
            loadImgList(arrImg)
        }
       
        //加载所有图片
        function loadImgList(arrImg) {           
            for (var i = 0; i < arrImg.length; i++) {
                addPic(arrImg[i]);
            }
        }

        //保存图片
        function savePic() {
            var img = ""
            $(".imglist").each(function () {
                if (img.length > 0)
                    img += ","
                img += $(this).val()
            })
            $(".imgs").val(img);    //图片列表，多个逗号隔开
            $("#branchform").submit();
        }

        //插入一张图片
        function addPic(data) {
            var html = getImgHtml(data, imgIndex);
            $(".imglist").append(html);
            addPicHiden(data);
            bindImgBtn();   //绑定列表的按钮实践
            imgIndex++;     //图片计数
            $(".nopic").css("display", "none");
        }

        //插入隐藏值
        function addPicHiden(data) {
            var hidden = "<input type='hidden' class='imglist' id='img" + imgIndex + "' value='" + data + "' />";
            $(".form_imgs").append(hidden);
        }
        
        //商品图片行
        function getImgHtml(data,index){
            var html="";
            html+="<tr class='tr_"+index+"'>";
            html+="<td align='center'><input type='checkbox' value='0' /></td>";
            html += "<td><img style='height:40px;' src='@WorkContext.ImageCDN/upload/store/@WorkContext.StoreId/banner/" + data + "' /></td>";
            html+="<td><span class='delPic' data-index='"+index+"'>删除</span></td>";
            html+="</tr>";
            return html;
        }

        function bindImgBtn() {
            //删除上传图片
            $(".delPic").click(function () {
                var index = $(this).attr("data-index");
                $(".tr_" + index).remove();
                $(".uploadPreview").html("");
                //删除隐藏值
                $("#img" + index).remove();
                if ($(".delPic").length < 1)
                    $(".nopic").css("display", "");
            })
        }
    </script>  
}
